<template>
  <div class="home" @click="flag=!flag">
    <button >添加</button>
   <transition name="fade">
    <p class="box" v-if="flag">首页</p>
   </transition>
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag:false
    }
  }
}
</script>


<style>
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave.active{
    transition: opacity 5s ;
}
.box{
  width: 100px;
  height: 100px;
  text-align: center;

}
</style>
